<template>
    <van-nav-bar title="我的团队" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="myteam">
        <div class="myteam_reet">
            <div class="header">
                <div class="img"> <img src="../../../src/assets/img/myteam/m1.png" alt=""> </div>
                <van-rate v-model="token.Grade" :size="15" count="6" color="#ffd21e" readonly void-icon="star" void-color="#eee" />
            </div>
            <div class="body" style="padding-top: 10%;">
                <div class="int">
                    <div class="boot">
                        <h5> {{MemberExt.TeamCount}} </h5>
                        <p> 团队人数 </p>
                    </div>
                </div>
                <div class="int">
                    <div class="boos">
                        <h2> {{MemberExt.TeamAmounts}} </h2>
                        <p> 团队业绩 </p>
                    </div>
                </div>
                <!-- <div class="int">
                    <div class="boot">
                        <h5> {{MemberExt.DirectCount}} </h5>
                        <p> 直推人数 </p>
                    </div>
                    <div class="boos">
                        <h2> {{MemberExt.DirectAmounts}} </h2>
                        <p> 直推业绩 </p>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="myteam_list">
            <div class="my_cell">
                <div class="int" @click="goMyteamlist(1)">
                    <span>直推详情</span>
                    <a> {{MemberLevelCount.Level1}}人 </a>
                    <van-icon name="arrow" />
                </div>
                <div class="int" @click="goMyteamlist(2)">
                    <span>间推详情</span>
                    <a> {{MemberLevelCount.Level2}}人 </a>
                    <van-icon name="arrow" />
                </div>
                <!-- <div class="int" @click="goMyteamlist(3)">
                    <span>三级</span>
                    <a> {{MemberLevelCount.Level3}}人 </a>
                    <van-icon name="arrow" />
                </div>
                <div class="int" @click="goMyteamlist(4)">
                    <span>四级</span>
                    <a> {{MemberLevelCount.Level4}}人 </a>
                    <van-icon name="arrow" />
                </div>
                <div class="int" @click="goMyteamlist(5)">
                    <span>五级</span>
                    <a> {{MemberLevelCount.Level5}}人 </a>
                    <van-icon name="arrow" />
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
    import { onMounted, reactive, ref, toRefs } from 'vue'
    import { Toast, Notify } from 'vant';
    import { useStore } from "vuex"; // ⚪️ 引入状态管理
    import { useRoute, useRouter } from "vue-router";
    import router from "@/router";
    import { GetMemberExt } from "@/network/user";
    import { GetMemberLevelList, GetMemberLevelCount } from "@/network/myteam";;
    export default {
        setup() {
            const store = useStore(); // 获取对象
            const state = reactive({
                token: store.state.user.token,
                value: 3,
                MemberExt: {},
                MemberLevelCount: []
            });
            onMounted(() => {
                init();
            });
            // 初始化信息
            const init = () => {
                const toast = Toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '数据加载中...',
                });
                // 获取拓展信息
                GetMemberExt({
                    Id: state.token.ID
                }).then((res) => {
                    toast.clear()
                    var data = res.Data;
                    state.MemberExt = data
                });
                // 团队级别列表查询
                var params = {
                    memberId: state.token.ID,
                }
                GetMemberLevelCount(params).then((res) => {
                    toast.clear()
                    if (res.Code == 0) {
                        var data = res.Data;
                        var text = ['一级', '二级', '三级', '四级', '五级'];
                        state.MemberLevelCount = data
                    } else {}
                });
            };
            const goMyteamlist = (Grade) => {
                router.push({ path: "/myteamlist", query: { Grade: Grade } });
            };
            const onClickLeft  = () => {
                router.push({ path: "/my" });
            };
            return {
                ...toRefs(state),
                goMyteamlist,
                onClickLeft
            };
        },
    };
</script>

<style scoped>

</style>